<template>
  <el-dialog
    title="查看附件"
    :visible.sync="visible"
    width="800px"
    :append-to-body="true"
    :before-close="handleClose"
  >
    <el-table :data="data">
      <el-table-column prop="name" label="名称">
        <template slot-scope="scope">
          <el-tooltip
            popper-class="ellipsis-tip"
            :content="scope.row.name"
            placement="top-start"
          >
            <span class="ellipsis">{{ scope.row.name }}</span>
          </el-tooltip>
        </template></el-table-column
      >
      <el-table-column prop="size" label="大小"></el-table-column>
      <el-table-column prop="content" label="操作" width="100px" align="center">
        <template slot-scope="scope">
          <el-link
            type="primary"
            :underline="false"
            @click="downloadFile(scope.row)"
            >下载</el-link
          >
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>
<script>
export default {
  name: 'filePreview',
  props: {
    visible: {
      type: Boolean,
      default: () => {
        return false
      },
    },
    data: {
      type: Array,
      default: () => {
        return []
      },
    },
  },
  data() {
    return {}
  },
  methods: {
    downloadFile(item) {
      //下载附件
      const a = document.createElement('a')
      a.download = item.name
      a.href = item.fileDomain + item.url
      a.click()
    },
    handleClose() {
      this.$emit('close')
    },
  },
}
</script>
